<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <thumb :move="moveX" :ratio="ratioX" :size="width" :always="always" />
  <thumb
    :move="moveY"
    :ratio="ratioY"
    :size="height"
    vertical
    :always="always"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

import Thumb from './thumb.vue'
import { GAP } from './util'

const props = withDefaults(
  defineProps<{
    always: boolean
    width?: string
    height?: string
    ratioX?: number
    ratioY?: number
  }>(),
  {
    ratioX: 1,
    ratioY: 1
  }
)

const moveX = ref(0)
const moveY = ref(0)

const handleScroll = (wrap: HTMLDivElement) => {
  if (wrap) {
    const offsetHeight = wrap.offsetHeight - GAP
    const offsetWidth = wrap.offsetWidth - GAP

    moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY
    moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX
  }
}

defineExpose({
  handleScroll
})
</script>
